<!--
 * @Description: 自动化营销列表
 * @Author: lixianggang
 * @Date: 2022-11-08 20:35:43
 * @LastEditors: lixianggang
 * @LastEditTime: 2023-01-12 15:54:41
-->
<template>
  <div class="page-wrap">
    <NormalForm pageTitle="自动化营销任务列表" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt" @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <div class="g-card mt16 table-card">
      <el-table :data="tableData" v-loading="tableLoading" height="calc(100% - 55px)" :row-style="{ height: '40px' }">
        <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
        <el-table-column prop="flowName" label="旅程名称" align="center"></el-table-column>
        <el-table-column prop="triggerName" label="旅程触发条件" align="center"></el-table-column>
        <el-table-column prop="flowCodeTotal" label="旅程阶段总数" align="center"></el-table-column>
        <el-table-column prop="createBy" label="旅程创建人" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="taskTotal" label="任务总数" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="80" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="checkDetail(scope.row)" v-hasPermi="['admin:node:list']">线索详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    </div>
  </div>
</template>

<script>
import { getTaskList } from '@/api/operate/automarket'

export default {
  data() {
    return {
      queryForm: {
        flowName: '',
        triggerId: '',
        deptId: null,
        staff: '',
        dateRange: [],
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '旅程名称',
          value: '',
          prop: 'flowName',
          type: 'INPUT',
          emunName: ''
        },
        {
          label: '触发节点',
          value: '',
          prop: 'triggerId',
          type: 'SELECT',
          emunName: 'triggerList'
        },
        {
          label: '管理机构',
          value: null,
          prop: 'deptId',
          type: 'MANAGE_COM',
          emunName: ''
        },
        {
          label: '创建人',
          value: '',
          prop: 'staff',
          type: 'STAFF',
          emunName: ''
        },
        {
          label: '创建',
          value: [],
          prop: 'dateRange',
          type: 'DATE_RANGE',
          formate: 'yyyy-MM-dd',
          emunName: ''
        },
      ],
      enumOpt: {
        triggerList: [],
      },
      tableData: [],
      tableLoading: false,
      total: 0,
    }
  },
  methods: {
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.getTaskListFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.getTaskListFn()
    },
    getTaskListFn() {
      this.tableLoading = true
      const params = {
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
        flowName: this.queryForm.flowName,
        triggerId: this.queryForm.triggerId,
        deptId: this.queryForm.deptId,
        beginTime: this.queryForm.dateRange?.[0],
        endTime: this.queryForm.dateRange?.[1],
        createCodeList: this.queryForm.staff + '',
      }
      getTaskList(params).then((res) => {
        this.tableLoading = false
        if (res.code === 200) {
        this.tableData = res.data?.rows || []
        this.total = res.data?.total || 0
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },
    checkDetail(row) {
      this.$router.push({
        path: 'ClueDetail',
        query: {
          flowId: row.flowId,
        },
      })
    },
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getTaskListFn();
    },
    handleReset() {
      this.queryForm = {
        flowName: '',
        triggerId: '',
        deptId: null,
        staff: '',
        dateRange: [],
        pageNum: 1,
        pageSize: 20,
      }
      this.getTaskListFn()
    },
    init() {
      // 触发条件
      this.getDicts('journey_condition_type').then((res) => {
        if (res.code === 200) {
          this.enumOpt['triggerList'] = res.data
        }
      })
      this.handleQuery()
    },
  },
  mounted() {
    this.init()
  },
}
</script>

<style lang='scss' scoped>
@import '@/styles/base.scss';
.page-wrap {
  height: 100%;
  .table-card {
    padding: 20px;
    height: calc(100% - 174px);
  }
}
</style>
